function Banner(imgArr, seletor  , time) {
    this.time = time ;
    this.imgArr = imgArr;
    this.oBanner = document.querySelector(seletor);
    this.oUl = this.oBanner.querySelector('ul');
    this.oOl = this.oBanner.querySelector('ol');
    // 翻页
    this.index = 0;
    // 定时器
    this.t = null;
    this.renderList() ;
    this.oUlLis = this.oUl.querySelectorAll('li');
    this.oOlLis = this.oOl.querySelectorAll('li');

    this.cc() ;
    this.autoPlay()
}


// 动态生成图片
Banner.prototype.renderList = function () {
    let imgHTML = '';
    let dotHTML = '';
    this.imgArr.forEach((v, i) => {
        // imgHTML += `<li><img src="${v}"></li>`
        imgHTML += `<li>${v}</li>`
        dotHTML += `<li class="dot" index=${i}></li>`
    })
    this.oUl.innerHTML = imgHTML;
    this.oOl.innerHTML = dotHTML;
    const oUlLis = this.oUl.querySelectorAll('li');
    const oOlLis = this.oOl.querySelectorAll('li');
    oUlLis[0].classList.add('show');
    oOlLis[0].classList.add('active');

}


Banner.prototype.autoPlay = function() {
    // const oUlLis = this.oUl.querySelectorAll('li');
    // const oOlLis = this.oOl.querySelectorAll('li');
    this.t = setInterval(() => {
        this.index++;
        if (this.index === this.oUlLis.length) {
            this.index = 0;
        }
        this.show()
    }, this.time)
}


Banner.prototype.show = function() {
    // const oUlLis = this.oUl.querySelectorAll('li');
    // const oOlLis = this.oOl.querySelectorAll('li');
     // 清除所有，显示当前
     this.oUlLis.forEach((v, i) => {
        v.classList.remove('show');
        this.oOlLis[i].classList.remove('active');
    })
    this.oUlLis[this.index].classList.add('show');
    this.oOlLis[this.index].classList.add('active');
}

Banner.prototype.cc = function() {
    console.log(this);   //
    this.oBanner.onclick =  (e) => {

        const ev = e || event;
        const target = ev.target || ev.srcElement;
        // 上翻页
        if (target.id === 'prev') {
            clearInterval(this.t);
            if (this.index === 0) {
                this.index = this.oUlLis.length
            }
            this.index--;
            this.show()
            return
        }
        // 下翻页
        if (target.id === 'next') {
            clearInterval(this.t);
            if (this.index === this.oUlLis.length - 1) {
                this.index = -1
            }
            this.index++;
            this.show()
            return
        }
        // 小点切换
        if (target.className === 'dot') {
            clearInterval(this.t);
            this.index = target.getAttribute('index');
            this.show();
        }
    }
}
